<template>
<el-scrollbar>
  <div class="main-content">
    <BreadCrumb />
    <div class="main-box-content" :style="{ height: `${ViewStore.GetViewHeight(105)}px` }">
        <IndexPage v-if="route.path === '/main'" />
        <router-view />
    </div>
  </div>
</el-scrollbar>
</template>

<script setup lang="ts">
import BreadCrumb from "@components/BreadCrumb.vue";
import IndexPage from "@/views/index/IndexPage.vue";
import { useRoute } from "vue-router";
import { useViewHeightStore } from "@/store/viewheight";

const ViewStore = useViewHeightStore();

const route = useRoute();
</script>

<style scoped lang="less">
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  width: 98%;
}
</style>
